<template>
  <el-container>
    <el-header>
      <span class="logo-title">小裙子管理后台</span>
      <div class="profile"><img :src="user.avatar" alt="profile" width="45px" height="45px"></div>
      <el-dropdown @command="slotFn">
        <span class="el-dropdown-link">
          欢迎您，{{user.name}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="loginOut">安全退出系统</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>
    <el-container>
      <el-aside :width="asideWidth" ref="aside">
        <div class="collapse" ref="collapse">
          <i :class="[isCollapse ? 'el-icon-circle-plus' : 'el-icon-remove']" @click="doCollapse"></i>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" :router="true" :unique-opened="true" :default-active="$route.path">
          <el-submenu v-for="(menu, index) in menus" :key="index" :index="'' + index">
            <template slot="title"><i :class="menu.icon"></i><span slot="title">{{ menu.title }}</span></template>
            <el-menu-item v-for="(item, i) in menu.children" :key="i" :index="item.path">{{ item.title }}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-container ref="container">
        <el-main>
          <router-view style="padding: 20px;"/>
        </el-main>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: 'layout',
  data () {
    return {
      item: 15,
      isCollapse: false,
      asideWidth: '240px',
      user: {},
      menus: []
    }
  },
  methods: {
    doCollapse () {
      this.isCollapse = !this.isCollapse
      if (this.isCollapse) {
        this.asideWidth = '64px'
      } else {
        this.asideWidth = '240px'
      }
      setTimeout(() => {
        window.onresize && (window.onresize)()
      }, 500)
    },
    slotFn (fn) {
      this[fn] && this[fn]()
    },
    loginOut () {
      this.axios.get('/Login/logout')
        .then(res => {
          if (res.data.status === 1) {
            window.sessionStorage.removeItem('sessionId')
            this.$router.push('/')
          }
        })
    }
  },
  created () {
    let user = JSON.parse(sessionStorage.getItem('user'))
    this.menus = JSON.parse(sessionStorage.getItem('menu'))
    if (user) {
      this.user = user
    }
  }
}
</script>

<style scoped>
  .logo-title{
    font-size: 20px;
    display: inline-block;
    line-height: 60px;
    color: #666;
    font-weight: bold;
  }
  .el-main{
    padding: 0;
  }
  .el-container{
    overflow-y: auto;
  }
  .el-header{
    border-bottom: 1px solid #e6e6e6;
  }
  .title_img{
    margin-top: 11px;
  }
  .el-dropdown{
    line-height: 60px;
    float: right;
  }
  .item{
    float: right;
    margin-right: 50px;
    margin-top: 20px;
    display: inline;
  }
  .message{
    font-size: 18px;
  }
  .el-aside{
    padding-top: 30px;
    border-right: 1px solid #e6e6e6;
    overflow-x: hidden;
    transition: width .5s;
  }
  .el-menu{
    border-right: none;
  }
  .el-main{
    background-color: #F2F6FC;
    box-shadow: inset 0 0 10px #C0C4CC;
    display: block;
  }
  .profile{
    width: 45px;
    height: 45px;
    margin: 8px 20px 7px;
    border-radius: 100%;
    float: right;
    overflow: hidden;
    box-shadow: 0 0 5px #eee;
  }
  .collapse{
    text-align: center;
    font-size: 25px;
    color: #606266;
    padding-bottom: 10px;
  }
  .collapse i{
    cursor: pointer;
  }
  .el-container.is-vertical{
    height: 100%;
  }
</style>
